<template>


  <el-dialog class="abow_dialog"
             :close-on-click-modal="false"
             :append-to-body="true"
             :modal-append-to-body="appendToBody"
             title="业务列表查询"
             width="75%"
             top="10vh"
             :visible.sync="visible"
             @close="$emit('update:busChildShow', false)"
             :show="busChildShow">
    <div>
      <el-form :inline="true" :model="queryForm">
        <el-form-item label="名称">
          <el-input v-model="queryForm.modelName" clearable></el-input>
        </el-form-item>
        <el-form-item label="表名">
          <el-input v-model="queryForm.tableName" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button type="default" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <Row>

        <Col span="17" class="no-padding border-bottom border-right boder-margin">
          <Table  highlight-row ref="selection" height="450"
                 @on-select-cancel="cancelSelectionChange"
                 @on-select="selectionOnChange"
                 @on-select-all="selectAll"
                 @on-select-all-cancel="selectAllCancel"

                 :columns="tableColumns" :data="tableData" style="padding-left: 10px;padding-top: 10px"></Table>
          <Page ref="pages" :total="userTotal" show-elevator @on-change="changePanelUser" style="margin-top: 3px"/>
          <!--          @on-change="changePanelUser"-->
        </Col>
        <Col span="5" class="border-right border" style="padding-left: 10px;margin-left: 10px"
             :style="{ 'min-height': tableMinHeight+'px' }">

          <Table  highlight-row ref="showTable" style="padding-top: 10px"
                 v-if="showTableData"
                 height="450"
                 :columns="showTableColumns" :data="showTableData"></Table>
        </Col>
      </Row>

    </div>
    <span slot="footer" class="dialog-footer">
           <el-button type="primary" @click="confirmDialog">确 定</el-button>
    <el-button @click="visible = false">取 消</el-button>

  </span>
  </el-dialog>
</template>

<script>
  import { getBusinessTableListJson } from '@/api/form'

  export default {
    methods: {
      mount() {
      },
      created() {
      },
      resetQuery:function(){
        this.queryForm.modelName = ""
        this.queryForm.tableName = ""
        this.queryForm.page = 1;
      },
      reset: function () {
        this.resetQuery()
        this.getAllUser();
      },
      search: function () {
        this.getAllUser();
      },
      changePanelUser: function (page) {
        this.queryForm.page = page;
        this.getAllUser();
      },
      cancelSelectionChange: function (selection, row) {
        var existData = this.remove(row.id)
        this.showTableData = existData;

      },
      operateTable: function (selection) {

        if (!this.showTableData) {
          this.showTableData=[]
        }
        var array = this.showTableData.concat(selection)
        var newArray = this.unique(array);
        this.showTableData = newArray;

      },
      selectionOnChange: function (selection, row) {
        this.operateTable(selection)
      },
      unique(arr) { // 根据唯一标识no来对数组进行过滤
        const res = new Map();  //定义常量 res,值为一个Map对象实例
        //返回arr数组过滤后的结果，结果为一个数组   过滤条件是，如果res中没有某个键，就设置这个键的值为1
        return arr.filter((arr) => !res.has(arr.tableName) && res.set(arr.tableName, 1))
      },
      remove(id) { // 根据唯一标识no来对数组进行过滤
        const res = new Map();  //定义常量 res,值为一个Map对象实例
        //返回arr数组过滤后的结果，结果为一个数组   过滤条件是，如果res中没有某个键，就设置这个键的值为1
        return this.showTableData.filter((arr) => !(arr.id == id))
      },
      exist(tableName) { // 根据唯一标识no来对数组进行过滤
       if (this.showTableData){
         return this.showTableData.filter((arr) => (arr.tableName == tableName))
       }

      },

      selectAll: function (selection) {
        this.operateTable(selection)
        this.curentTableData=selection;
      },
      selectAllCancel: function (selection, row) {
        var select=  this.$refs.selection.data
        if (select) {
          for (var i = 0; i < select.length; i++) {
            this.showTableData = this.remove( select[i].id)
          }
        }

      },
      selecSingleCancel: function (selection, row) {
        var select=  this.$refs.selection.data
        if (select) {
          for (var i = 0; i < select.length; i++) {
            this.showTableData = this.remove( select[i].id)
          }
        }

      },
      getAllUser: function () {
        getBusinessTableListJson(this.queryForm).then((response) => {
          if (response.code == 0) {
            this.tableData = response.data;

            this.userTotal = parseInt(response.count);
            this.$nextTick(() => {
              var objData=  this.$refs.selection.$refs.tbody.objData;
              var leftData=[];
              for(var obj in objData){
                leftData.push(objData[obj])
              }
              if (leftData){
                for (var i = 0; i <leftData.length ; i++) {
                  if (this.exist(leftData[i].tableName) && this.exist(leftData[i].tableName).length>0){
                    this.$refs.selection.$refs.tbody.objData[i]._isChecked = true;
                  }
                }
              }


            })
          }

        })
      },
      confirmDialog() {

        if (this.onOk) {
          this.visible = false
          this.onOk(this.showTableData);
        }
      },
      changePanel: function (data) {
      }
    },
    data() {
      return {
        visible: this.show,
        appendToBody: false,
        curentTableData: [],
        index: 1,
        roleDefaultProps: {
          children: 'childList',
          label: 'name'
        },
        orgDefaultProps: {
          children: 'children',
          label: 'deptName'
        },
        positionDefaultProps: {
          children: 'children',
          label: 'posName'
        },
        activiteCode: "",
        serviceVal: '',
        activePanel: '',
        tableHeight: 420,
        tableMinHeight: 484,
        userTotal: 0,
        currentChoose: '',
        orgModel: '',
        positionModel: '',
        roleData: [],
        orgData: [],
        positionDemension: [],
        orgDemension: [],
        queryForm: {
          page: 1,
          length: 10,
          modelName: "",
          tableName: "",
        },
        showTableColumns: [
          {
            title: '名称',
            key: 'modelName'
          },
          {
            title: '操作', //
            key: 'id', //
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    icon: "ivu-icon-ios-trash",
                  },
                  style: {
                    display: 'flex',
                    'justify-content': 'center',
                  },
                  on: {
                    click: (index, data) => {

                      if (this.showTableData) {
                        this.showTableData.splice(params.index, 1)
                        this.$nextTick(() => {
                          var objData=  this.$refs.selection.$refs.tbody.objData;
                          var leftData=[];
                          for(var obj in objData){
                            leftData.push(objData[obj])
                          }
                          for (var i = 0; i <leftData.length ; i++) {
                            if (leftData[i].id==params.row.id) {
                              this.$refs.selection.$refs.tbody.objData[i]._isChecked = false;

                              break
                            }

                          }

                        })
                      }



                    },
                  },
                }, '删除'),
              ]);
            },
          },

        ],

        tableColumns: [
          {
            type: 'selection',
            width: 70,
            align: 'center'
          },


          {
            title: '名称',
            key: 'modelName'
          },
          {
            title: '表名',
            key: 'tableName'
          },
          {
            title: '描述',
            key: 'description'
          },
          {
            title: '分类',
            key: 'groupName'
          },
          {
            title: '类型',
            key: 'type',
            render: (h, params) => {
              if(params.row.type=='inner'){
                return h("div",{
                  style: {
                    display: "inline-block"
                  }
                },[
                  h("Tag",{
                    props: {
                      color: "primary",
                    },
                  },params.row.type=='inner'?"内部":"外部" ),
                ]);
              }else{
                return h("div",{
                  style: {
                    display: "inline-block"
                  }
                },[
                  h("Tag",{
                    props: {
                      color: "success",
                    },
                  },params.row.type=='inner'?"内部":"外部" ),
                ]);
              }

            }
      }
        ],
        tableData: [],
        showTableData: [],
      };
    },
    mount() {
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
    },
    props: {
      busChildShow: {
        type: Boolean,
        default: false
      },
      onOk: {    //定义onOK属性
        type: Function
      },
      existData: Array,
      nodeIndex: {
        type: Number,
        default: 0
      },
      alias: {
        type: String,
        default: "agree"
      },
    },
    watch: {
      busChildShow() {
        //分页初始化为第一页
        this.$nextTick(function(){
          this.$refs['pages'].currentPage = 1;
        })
        if (this.busChildShow) {
          this.showTableData=this.existData
          this.getAllUser()
          this.visible = this.busChildShow;
          this.index = this.nodeIndex
        }else{
          this.resetQuery()
        }



      }
    }
  };
</script>
<style lang="scss">

</style>
